<template>
  <div class="content myFlex-y">
    <div class="movieSearch myFlex-x">
      <el-input
          v-model="movieName"
          style="width: 600px;height: 40px"
          size="large"
          placeholder="请输入电影名称"
          :suffix-icon="Search"
          @keydown.enter="searchMovie"
      />
      <el-button @click="searchMovie" class="searchBut" type="primary" plain>搜索</el-button>
    </div>
    <el-scrollbar height="900px" @end-reached="loadMore">
      <div class="movieList">
        <div class="movie" @click="goDetail(movie)" v-for="(movie,index) in movieList" :key="index">
          <div class="movieInfo">
<!--            <img :src="require('@/assets/img/'+movie.movieImg)">-->
            <img  :src="'/src/assets/img/'+movie.movieImg">
            <div class="movieName myFlex-x">
              {{movie.movieName}}
            </div>
          </div>
          <div class="ticket myFlex-x">
            购票
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {require} from "@/utils/getFile.ts";
import request from "@/utils/request.ts";
import {ElMessage} from "element-plus";
import {router} from "@/router/router.ts";

let movieName = ref('')

// 分页配置
let pageCurrent = ref(1)
let pageSize = ref(10)
onMounted(()=>{
  searchMovie()
})
let movieList = ref([])
// 根据输入的内容搜索电影
function searchMovie(){
  // 每次发送请求获取10条电影数据
  request.get("/getMoviePageList",{params:{pageCurrent:pageCurrent.value,pageSize:pageSize.value,movieName:movieName.value}})
      .then((res)=>{
        if (pageCurrent.value>1){
          // 将新获取到数据添加到集合的后面
          movieList.value = movieList.value.concat(res.data.records)
        }else {
          movieList.value = res.data.records
        }
      })
      .catch((error)=>{
        ElMessage.error(error)
      })
}
// 滚动到底部，触发事件获取更多数据
function loadMore(direction){
  if (direction === 'bottom'){
    pageCurrent.value ++;
    // 当滚动到底部的时候，再去获取下一页的数据
    searchMovie();
  }
}
// 点击电影跳转到详情页
// function goDetail(movie){
//   router.push({path:'/details',query:{"movie":JSON.stringify(movie)}})
// }
function goDetail(movie){
// window.open(router.resolve({path:"/details", query:{movieId:movie.movieId}}).href)
  window.open(router.resolve({path:"/details", query:{movie:JSON.stringify(movie)}}).href)
}
</script>

<style scoped>
@import "@/assets/css/movieList.css";
</style>